<template>
  <div style="display: inline">
    <el-button type="primary" @click="showDialog">配置采购货源</el-button>

    <el-dialog
      title="配置采购货源"
      :visible.sync="dialogVisible"
      width="70%"
      :modal-append-to-body="false"
      :fullscreen="true"
    >
      <div
        v-loading="dialogVisibleLoading"
        :class="`procureDialog${suitId}`"
      >
        <div class="dialog-title">
          当前变体
        </div>
        <div class="dialog-goods mgb20">
          <el-table
            :data="goods"
            row-key="id"
            border
          >
            <el-table-column
              prop="goods"
              label="封面"
              align="center"
              width="120"
            >
              <template slot-scope="{row}">
                <img :src="row.image" width="85px" alt="">
              </template>
            </el-table-column>

            <el-table-column
              prop="goods"
              label="标题"
              align="left"
              min-width="200"
            >
              <template slot-scope="{row}">
                <el-tooltip class="item" effect="dark" :content="row.title" placement="top">
                  <div class="goods-title hidden-2">
                    {{row.title}}
                  </div>
                </el-tooltip>

                <div class="goods-SKU-info hidden-1" v-if="row.attributes.length > 0">
                  <span
                    v-for="attr in row.attributes"
                    :key="attr.name"
                    class="attr"
                  >
                    {{attr.name}} : {{attr.value}}
                    <span class="attr-link"> | </span>
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="goods"
              label="适用Listing ID与SKU"
              align="center"
              min-width="120"
            >
              <template slot-scope="{}">
                <p
                  v-for="item in goodsList"
                  :key="item.id"
                  style="margin: 0"
                >
                  {{item.goodsId}} {{item.sku ? `(${item.sku})` : ''}}
                </p>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="dialog-title">
          配置1688采购货源
        </div>
        <div class="dialog-1688-table" >
          <el-form ref="table1688" :model="currentForm" label-width="120px" :rules="rules">
            <el-form-item label="采购链接" prop="link">
              <el-input v-model="currentForm.link"></el-input>
            </el-form-item>
            <el-form-item label="关联SKU" prop="productId">
              <el-button type="primary" @click="getAliGoods" :loading="skuButtonLoading" class="mgb10">选择SKU</el-button>
              <template v-if="currentForm.productId">
                <div class="sku-goods">
                  <div class="sku-image">
                    <img :src="currentForm.image" alt="">
                  </div>
                  <div class="sku-goods-info">
                    <div class="goods-line">
                      <div class="sku-goods-title">
                        {{ currentForm.subject }}
                      </div>
                      <div class="">
                        {{ currentForm.supplierLoginId}}
                      </div>
                    </div>

                    <div class="goods-line">
                      <div class="sku-price">
                        <span>价格：</span>
                        <span style="font-size:16px;color:#FC6347;">¥ {{ currentForm.price }}</span>
                      </div>
                      <div>
                        <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
                          <template slot="content">
                            <div style="width: 400px;font-size: 13px">
                              1688规定一件代发采购需要加盟成为供应商的分销商，由于1688接口限制，MinoShipping无法帮您在下单采购时自动加盟建立分销关系，如需使用一件代发下单采购，请根据<span style="color: #4A9FF9;cursor: pointer" @click="jumpProcureHelp">《使用教程》</span>前往1688操作加盟
                            </div>
                          </template>
                          <div>
                            <i class="el-icon-warning-outline"></i>
                            {{currentForm.supplierRelation ? '已加盟' : '未加盟'}}
                          </div>

                        </el-tooltip>

                      </div>
                    </div>

                    <div class="goods-line">
                      <div class="goods-SKU-info" v-if="currentForm.attributes.length > 0">
                        <span
                          v-for="attr in currentForm.attributes"
                          :key="attr.name"
                          class="attr"
                        >
                          {{attr.name}} : {{attr.value}}
                          <span class="attr-link"> | </span>
                        </span>
                      </div>
                      <div class="min-num">
                        <span>{{currentForm.minOrderQuantity}}{{currentForm.unit}}起批</span>
                        <span v-if="currentForm.mixWholeSale">/{{currentForm.mixNumber}}{{currentForm.unit}}混批</span>
                        <span v-if="currentForm.isConsignMarketOffer">/一件代发</span>
                      </div>

                    </div>


                  </div>
                </div>
                <div class="SKU-tips" style="float: left;padding-left: 7px;font-weight: bold;" v-if="currentForm.isExpired">
                  当前关联SKU已失效，请及时更新
                </div>
              </template>
              <template v-else>
                <div class="SKU-tips">请填写采购链接后再选择变体需要关联的SKU</div>
              </template>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      class="sku-dialog"
      title="选择SKU"
      :visible.sync="dialogSKU"
      width="60%"
      :modal-append-to-body="false"
    >
      <div class="master-goods">
        <div class="goods-image">
          <img :src="aliGoods.image" alt="">
        </div>
        <div class="goods-info">
          <div class="goods-line">
            <div class="goods-title hidden-1" style="display: inline">
              {{aliGoods.subject}}
            </div>
            <div class="supplier">{{aliGoods.supplierLoginId}}</div>
          </div>
          <div class="goods-line">
            <div class="left"></div>
            <div class="right">
              <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
                <template slot="content">
                  <div style="width: 400px;font-size: 13px">
                    1688规定一件代发采购需要加盟成为供应商的分销商，由于1688接口限制，MinoShipping无法帮您在下单采购时自动加盟建立分销关系，如需使用一件代发下单采购，请根据<span style="color: #4A9FF9;cursor: pointer" @click="jumpProcureHelp">《使用教程》</span>前往1688操作加盟
                  </div>
                </template>
                <div>
                  <i class="el-icon-warning-outline"></i>
                  {{aliGoods.supplierRelation ? '已加盟' : '未加盟'}}
                </div>
              </el-tooltip>
            </div>
          </div>
          <div class="goods-line">
            <div class="goods-price">
              <span>价格：</span>
              <span style="font-size:16px;color:#FC6347">{{aliGoodsPrice ? '￥' + aliGoodsPrice : ''}}</span>
            </div>
            <div class="minOrderQuantity">
              <span>{{aliGoods.minOrderQuantity}}{{aliGoods.unit}}起批</span>
              <span v-if="aliGoods.mixWholeSale">/{{aliGoods.mixNumber}}{{aliGoods.unit}}混批</span>
              <span v-if="aliGoods.isConsignMarketOffer">/一件代发</span>
            </div>
          </div>
        </div>
      </div>
      <div class="goods-1688-table">
        <el-table
          :data="aliGoods.skuInfos"
          border
          @current-change="handleCurrent"
        >
          <el-table-column
            align="center"
            width="50"
          >
            <template slot-scope="{row}">
              <el-radio v-model="chooseAliGoodsSpecId" :label="row.specId">{{""}}</el-radio>
            </template>
          </el-table-column>

          <el-table-column
            prop=""
            label="封面"
            align="center"
            width="150"
          >
            <template slot-scope="{row}">
              <img :src="row.image" width="100px" alt="">
            </template>
          </el-table-column>
          <el-table-column
            prop="SKU"
            label="SKU"
            align="left"
            min-width="200"
          >
            <template slot-scope="{row}">
              <div class="goods-SKU-info" v-if="row.attributes.length > 0">
                <span
                  v-for="attr in row.attributes"
                  :key="attr.name"
                  class="attr"
                >
                  {{attr.name}} : {{attr.value}}
                  <span class="attr-link"> | </span>
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="amountOnSale"
            label="库存"
            align="center"
            width="100"
          >
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogSKU = false">取 消</el-button>
        <el-button type="primary" @click="submitSKU">确 定</el-button>
      </span>

    </el-dialog>

  </div>
</template>

<script>
import {getAliGoodsByLink, getGoodsProcure, saveProcure} from "@/api/procure";
import {deepCopy} from "@/utils";
import sk from "element-ui/src/locale/lang/sk";
import Ali1688AuthDialog from "@/views/order/components/Ali1688AuthDialog.vue";
import {EventBus} from "@/utils/eventBus";
import {jumpProcureHelp} from "@/utils/common";

export default {
  name: "settingProcure",

  props:{
    suitId: {
      type: Number,
      required: true,
    }
  },
  watch:{
    dialogVisible(val){
      // 当显示弹窗的时候 去请求对应的数据
      if(val){
        this.getData()
      }
    }
  },
  computed:{
    // 价格区间
    aliGoodsPrice(){
      let price = '';
      const arr = this.aliGoods.skuInfos.map(({price})=> price);
      const max = Math.max(...arr);
      const min = Math.min(...arr);
      return max === min ? min : `${min}~${max}`;
    }
  },
  data(){
    return {
      dialogVisible: false,
      dialogVisibleLoading: false,
      dialogSKU: false,
      goods: [],
      goodsList: [],
      currentForm: {
        productId: '',
        specId: '',
        subject: '',
        image: '',
        price: '',
        attributes: [

        ],
        minOrderQuantity: 0,
        supplierLoginId: '',
        unit: '',
        link: '', // 当前配置的链接
        isExpired: 0, // 当前是否失效
        supplierRelation: false, // 是否分销商关系
        mixWholeSale: false, // 是否支持混采
        mixNumber: 0, // 混采的数量
        isConsignMarketOffer: false, // 是否支持一件代发
      },
      authDialog: false, // 1688 授权
      rules:{
        link: [
          { required: true, message: '请填写采购链接', trigger: 'blur' },
        ],
        productId: [
          { required: true, message: '请选择对应的商品',trigger: 'blur' },
        ],
      },
      skuButtonLoading: false,
      chooseAliGoodsSpecId: '', // 当前选择的阿里的规格id
      aliGoods:{
        productID: '',
        subject: '', // 标题
        supplierLoginId: '', // 供应商id
        image: '',
        unit: '', // 单位
        link: '',
        skuInfos:[],
        minOrderQuantity: 0, // 最小起批量
      },

    }
  },
  created() {
  },
  methods:{
    jumpProcureHelp,
    getData(){
      this.dialogVisibleLoading = true
      getGoodsProcure(this.suitId)
        .then(res=>{
          this.dialogVisibleLoading = false
          this.goods = [res.data.goods]
          this.goodsList = res.data.goodsList
          this.currentForm = !res.data.aliGoods ? this.currentForm : res.data.aliGoods
          this.chooseAliGoodsSpecId = res.data.aliGoods ? res.data.aliGoods.specId : '';
        })
    },
    showDialog(){
      if(this.$store.getters.auth1688){
        EventBus.$emit('show1688AuthDialog');
        return;
      }
      this.dialogVisible = true
    },
    // 获取阿里的商品
    getAliGoods(){
      if(this.currentForm.link === ''){
        this.$errorMessage('请填写采购链接')
        return;
      }
      this.skuButtonLoading = true;
      getAliGoodsByLink({
        link: this.currentForm.link
      })
        .then(res=>{
          this.skuButtonLoading = false;
          if(res.error === 0){
            this.dialogSKU = true
            this.aliGoods = res.data
          }else{
            this.$errorMessage(res.message)
          }
        })
    },
    // 点击行 也认为是选中
    handleCurrent(val) {
      this.chooseAliGoodsSpecId = val.specId
    },
    // 确定选择某个规格
    submitSKU(){
      if(!this.chooseAliGoodsSpecId){
        this.dialogSKU = false;
      }
      // 查询对应的规格
      const skuInfo = this.aliGoods.skuInfos.find(item=> item.specId === this.chooseAliGoodsSpecId)

      this.currentForm.specId = this.chooseAliGoodsSpecId;
      this.currentForm.productId = this.aliGoods.productID;
      this.currentForm.subject = this.aliGoods.subject;
      this.currentForm.image = skuInfo.image;
      this.currentForm.price = skuInfo.price
      this.currentForm.attributes = skuInfo.attributes
      this.currentForm.minOrderQuantity = this.aliGoods.minOrderQuantity
      this.currentForm.supplierLoginId = this.aliGoods.supplierLoginId
      this.currentForm.unit = this.aliGoods.unit;

      this.currentForm.supplierRelation = this.aliGoods.supplierRelation;
      this.currentForm.mixWholeSale = this.aliGoods.mixWholeSale;
      this.currentForm.mixNumber = this.aliGoods.mixNumber;
      this.currentForm.isConsignMarketOffer = this.aliGoods.isConsignMarketOffer;



      this.dialogSKU = false
    },
    // 提交表单
    submitForm(){
      this.$refs.table1688.validate(valid=>{
        if(valid){
          const postData = {
            suitId: this.suitId,
            productId: this.currentForm.productId,
            specId: this.currentForm.specId,
            link: this.currentForm.link
          }
          saveProcure(postData)
            .then(res=>{
              if(res.error === 0){
                this.$successMessage(res.message)
                this.dialogVisible = false;
                this.$emit('changeProcure',true); // 通知父组件
              }else{
                this.$errorMessage(res.message)
              }
            })
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.dialog-title{
  font-size: 18px;
  color: #000000;
  padding-bottom: 10px ;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 20px;
}
.goods-line{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}
.sku-goods{
  .sku-goods-info{
    float: left;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
    width: calc(100% - 135px);
    height: 125px;
    padding-left: 10px;
    font-weight: bold;
  }
  .sku-image{
    float: left;
    img{
      width: 120px;
    }
  }
}
.master-goods{
  height: 125px;
  width: auto;
  font-weight: bold;
  .goods-image{
    display: inline;
    float: left;
    img{
      width: 125px;
    }
  }
  .goods-info{
    padding-left: 10px;
    float: left;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
    height: 100%;
    width: calc(100% - 125px);
    .goods-title{
      font-weight: bold;
    }
    .supplier{
      //color: #AAAAAA;
      font-weight: 500;
    }
  }
}
.SKU-tips{
  color: rgb(252, 99, 71);
}
</style>
